<template>
  <PdfConverter apiUrl="/ai/chat/message/transferASZ" />
</template>

<script setup lang="ts">
import PdfConverter from '../components/PdfConverter.vue'

defineOptions({ name: 'PdfWordAisenz' })
</script>

<style scoped lang="scss">
.pdf-word-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: calc(100vh - 100px);
  padding: 20px;
  background-color: var(--el-bg-color);
}

.pdf-word-card {
  width: 100%;
  max-width: 800px;
  padding: 40px;
  background-color: var(--el-bg-color-overlay);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgb(0 0 0 / 8%);
  transition: all 0.3s ease;

  .card-header {
    margin-bottom: 30px;
    text-align: center;

    h2 {
      margin-bottom: 8px;
      font-size: 28px;
      font-weight: 600;
      color: var(--el-text-color-primary);
    }

    .subtitle {
      font-size: 16px;
      color: var(--el-text-color-secondary);
    }
  }

  .upload-area {
    position: relative;
    display: flex;
    min-height: 250px;
    padding: 50px 30px;
    margin-bottom: 30px;
    text-align: center;
    cursor: pointer;
    border: 2px dashed var(--el-border-color);
    border-radius: 8px;
    transition: all 0.3s ease;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    &.is-dragover {
      background-color: rgba(var(--el-color-primary-rgb), 0.05);
      border-color: var(--el-color-primary);
    }

    .file-input {
      display: none;
    }

    .upload-icon {
      margin-bottom: 16px;
      font-size: 48px;
      color: var(--el-color-primary);
    }

    .upload-text {
      p {
        margin: 0;
        font-size: 16px;
        color: var(--el-text-color-primary);
      }

      .upload-hint {
        margin-top: 8px;
        font-size: 14px;
        color: var(--el-text-color-secondary);
      }
    }

    .file-icon {
      margin-bottom: 12px;
      font-size: 40px;
      color: var(--el-color-primary);
    }

    .file-info {
      margin-bottom: 16px;

      .file-name {
        margin: 0 0 4px;
        font-size: 16px;
        font-weight: 500;
        color: var(--el-text-color-primary);
        word-break: break-all;
      }

      .file-size {
        margin: 0;
        font-size: 14px;
        color: var(--el-text-color-secondary);
      }
    }

    .file-actions {
      display: flex;
      gap: 10px;
    }

    .processing-status {
      display: flex;
      flex-direction: column;
      align-items: center;

      .progress-text {
        margin: 16px 0;
        font-size: 14px;
        color: var(--el-text-color-primary);
      }
    }
  }

  .result-area {
    padding: 24px;
    margin-bottom: 30px;
    text-align: center;
    background-color: rgba(var(--el-color-success-rgb), 0.1);
    border-radius: 8px;

    .result-header {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 20px;

      .success-icon {
        margin-right: 8px;
        font-size: 24px;
        color: var(--el-color-success);
      }

      span {
        font-size: 18px;
        font-weight: 500;
        color: var(--el-color-success);
      }
    }

    .download-btn {
      margin-right: 10px;
    }
  }

  .card-footer {
    text-align: center;

    p {
      margin: 0;
      font-size: 14px;
      color: var(--el-text-color-secondary);
    }
  }
}

@media (width <= 768px) {
  .pdf-word-card {
    padding: 20px;
  }

  .pdf-word-container {
    padding: 10px;
  }
}
</style>
